<template>
  <div class='info'>
    <img :src="getInfo.img" alt="">
    <p class="pr">
      <span class="price">￥{{getInfo.price}}</span>
      <span class="cost">￥{{getInfo.cost}}</span>
      <span class="fr title">{{getInfo.title}}</span>
    </p>
    <p>活动时间：{{getInfo.time}}</p>
  </div>
</template>
<script>
export default {
  props: ["info"],
  components: {},
  name: "",
  data() {
    return {};
  },
  computed: {
    getInfo() {
      return this.info || {};
    }
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.info {
  margin: 15px;
  font-size: 14px;
  color: #999;

  p{
    margin-top: 5px;
  }
  img {
    width: 100%;
    min-height: 150px;
  }
  .price {
    font-size: 24px;
    color: #f62a2a;
  }
  .cost {
    color: #999;
    text-decoration: line-through;
  }
  .group {
    background-color: #ffba52;
    text-align: center;
    font-size: 12px;
    text-indent: 0;
    color: #fff;
    padding: 0 5px;
    border-radius: 2px;
  }
  .title{
    line-height: 30px;
  }
}
</style>
